<template>
	<view class="container position-relative">
		<view style="margin-bottom: 130rpx;">
			<view class="section-1">
				<list-cell class="location" @click="selectStore">
					<view class="flex-fill d-flex justify-content-between align-items-center">
						<view class="store-name flex-fill">
							{{ store.storeName }}
						</view>
						<image src="/static/images/navigator-1.png" class="arrow"></image>
					</view>
				</list-cell>
				<!-- <template v-else>
					<list-cell @click="chooseAddress">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center justify-content-between mb-10">
								<view class="font-size-extra-lg text-color-base">{{ address.street }}</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="d-flex text-color-assist font-size-sm align-items-center">
								<view class="mr-10">{{ address.accept_name }}</view>
								<view class="mr-10">{{ !address.sex ? '先生' : '女士' }}</view>
								<view>{{ address.mobile }}</view>
							</view>
						</view>
					</list-cell>
				</template> -->
				<list-cell class="meal-time">
					<view class="flex-fill d-flex justify-content-between align-items-center">
						<!-- <view class="title">取餐时间</view> -->
						<view class="tips">请确认下单门店是否正确</view>
					</view>
				</list-cell>
				<list-cell class="contact" last :hover="false">
					<view class="flex-fill d-flex justify-content-between align-items-center">
						<view class="title flex-fill">联系电话</view>
						<view class="time">
							<input class="text-right" placeholder="请输入手机号码" v-model="phone" />
						</view>
						<button plain class="contact-tip" open-type="getPhoneNumber" @getphonenumber="bindPhone">自动填写</button>
					</view>
				</list-cell>
				<!-- <template v-else>
					<list-cell>
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center font-size-base text-color-base">
								<view class="flex-fill">预计送达时间</view>
								<view class="mr-10">15:18</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="font-size-base text-color-primary">
								特殊时期减少接触，请修改下方订单备注
							</view>
						</view>
					</list-cell>
				</template> -->
			</view>
			<!-- 购物车列表 begin -->
			<view class="section-2">
				<view class="cart d-flex flex-column">
					<list-cell last v-for="(item, index) in carts" :key="index">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center mb-10">
								<view class="name-and-props overflow-hidden">
									<view class="text-color-base font-size-lg">
										{{ item.productName }}
									</view>
								</view>
								<view class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
									<view>x{{ item.count }}</view>
									<view>￥{{ item.salePrice }}</view>
								</view>
							</view>
							<view class="text-truncate font-size-base text-color-assist">

							</view>
						</view>
					</list-cell>
					<!-- <template v-if="orderType == 'takeout'">
						<list-cell last v-if="store.packing_fee > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>包装费</view>
								<view>￥{{ parseFloat(store.packing_fee) }}</view>
							</view>
						</list-cell>
						<list-cell last v-if="store.delivery_cost > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>配送费</view>
								<view>￥{{ parseFloat(store.delivery_cost) }}</view>
							</view>
						</list-cell>
					</template> -->
				</view>
				<!-- <tui-list-cell unlined :arrow="hasCoupon" :hover="hasCoupon" @click="couponShow=true">
					<view class="tui-padding tui-flex">
						<view>优惠券</view>
						<view :class="{'tui-color-red':hasCoupon}">{{hasCoupon?"满5减1":'没有可用优惠券'}}</view>
					</view>
				</tui-list-cell> -->
				
				<list-cell last>
					<view class="flex-fill d-flex justify-content-end align-items-center">
						<view>总计￥{{ total }},实付</view>
						<view class="font-size-extra-lg font-weight-bold">￥{{ amount }}</view>
					</view>
				</list-cell>
			</view>
			<!-- 购物车列表 end -->
			<!-- <view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning" style="padding: 20rpx 0;">
				<view class="iconfont iconhelp line-height-100"></view>
				<view>优惠券不与满赠、满减活动共享</view>
			</view> -->
			<!-- 支付方式 begin -->
			<view class="payment">
				<list-cell last :hover="false">
					<text>支付方式</text>
				</list-cell>
				<!-- <list-cell>
					<view class="d-flex align-items-center justify-content-between w-100 disabled">
						<view class="iconfont iconbalance line-height-100 payment-icon"></view>
						<view class="flex-fill">余额支付（余额￥0）</view>
						<view class="font-size-sm">余额不足</view>
						<view class="iconfont iconradio-button-off line-height-100 checkbox"></view>
					</view>
				</list-cell> -->
				<list-cell last>
					<view class="d-flex align-items-center justify-content-between w-100">
						<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A;"></view>
						<view class="flex-fill">线下支付</view>
						<view class="iconfont iconradio-button-on line-height-100 checkbox checked"></view>
					</view>
				</list-cell>
			</view>
			<!-- 支付方式 end -->
			<!-- 备注 begin -->
			<!-- <list-cell arrow last @click="goToRemark">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">备注</view>
					<view class="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }}</view>
				</view>
			</list-cell> -->
			<!-- 备注 end -->
		</view>
		<!-- 付款栏 begin -->
		<!-- <view class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
			<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
			<view class="font-size-lg flex-fill">￥{{ amount }}</view>
			<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base" style="padding: 0 60rpx;"
			 @tap="pay">
				付款
			</view>
		</view> -->
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar">
			<view class="tui-flex-end tui-color-red" style="margin-right: 20rpx;">
				<view class="tui-black">实付金额: </view>
				<view class="tui-size-26">￥</view>
				<view class="tui-price-large">{{ amount }}</view>
				<!-- <view class="tui-size-26">.00</view> -->
			</view>
			<view class="tui-pr25">
				<tui-button width="200rpx" height="70rpx" :size="28" type="danger" shape="circle" @click="pay">确认支付</tui-button>
			</view>
		</view>
		
		<!-- 付款栏 end -->
		<t-select-coupons :show="couponShow" @close="couponClose"></t-select-coupons>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import listCell from '@/components/list-cell/list-cell'
	import {
		orderCreate,memberCart
	} from '@/api/order.js'
	import {
		bindWxPhone
	} from '@/api/user.js'
	import tSelectCoupons from "@/components/views/t-select-coupons/t-select-coupons"

	export default {
		components: {
			listCell,
			tSelectCoupons
		},
		data() {
			return {
				phone: "",
				store: null,
				carts:[],
				
				address:{},
				expressMoney:0,
				coupons:[],
				hasCoupon: true,
				couponShow:false
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'curretnStore']),
			total() {
				return this.carts.reduce((acc, cur) => acc + cur.count * cur.salePrice, 0)
			},
			amount() {
				return this.carts.reduce((acc, cur) => acc + cur.count * cur.salePrice, 0)
			}
		},
		onLoad(option) {
			this.phone = this.userInfo.phone
			this.store = this.curretnStore
			this.getMemberCart();
			this.$eventHub.$on('emit', (data) => {
				this.store = data
			});
		},
		methods: {
			...mapActions(['getCode']),
			...mapMutations(['setUserInfo']),
			getMemberCart() {
				let that = this;
				uni.showLoading({
					title: '加载中'
				})
				memberCart().then(res => {	
					uni.hideLoading()
					if (res.success) {
						that.carts = res.data.carts;
						that.address = res.data.address;
						that.expressMoney = res.data.expressMoney;
						that.coupons = res.data.coupons;
					}
				}, error => {
					uni.hideLoading()
					console.log(error);
				});
			},
			selectStore() {
				uni.navigateTo({
					url: '/pages/store/list'
				})
			},
			chooseAddress() {
				uni.navigateTo({
					url: '/pages/address/address?is_choose=true&scene=pay'
				})
			},
			goToPackages() {
				uni.navigateTo({
					url: '/pages/packages/index'
				})
			},
			bindPhone(e) {
				let that = this;
				this.getCode().then(code => {
					bindWxPhone(e.detail.encryptedData,
						e.detail.iv,
						code
					).then(res => {
						if (res.success) {
							that.setUserInfo(res.data);
							that.phone = res.data.phone;
						}
					}, error => {
						console.log(error);
					});
				}).catch(res => {
					console.log(res);
				});
			},
			couponClose(){
				this.couponShow=false
			},
			pay() {
				uni.showLoading({
					title: '提交中'
				})
				
				let cartIds = this.carts.reduce((acc, cur) => acc +"," + cur.id,this.carts[0].id)
				orderCreate({
					payType:0,
					orderType:2,
					channel:0,
					cartIds:cartIds,
					addressId:0,
					remark:'',
					phone:this.phone,
					storeId:this.store.id
				}).then(res => {
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/tabbar/order/index'
					})
				}, error => {
					uni.hideLoading()
					console.log(error);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}

	.arrow {
		width: 50rpx;
		height: 50rpx;
		position: relative;
		margin-right: -10rpx;
	}

	.location {
		.store-name {
			font-size: $font-size-lg;
		}

		.iconfont {
			font-size: 50rpx;
			line-height: 100%;
			color: $color-primary;
		}
	}

	.section-1 {
		margin-bottom: 30rpx;

		.contact {
			.contact-tip {
				margin-left: 16rpx;
				padding: 5rpx 8rpx;
				flex-shrink: 0;
				
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: 35rpx;
				line-height: 40rpx;
				transform: scale(0.8);
				transform-origin: 0 center;
				border-radius: 6rpx;
			}
		}
	}

	.section-2 {
		.name-and-props {
			width: 65%;
		}
	}

	.payment {
		margin-bottom: 30rpx;

		.disabled {
			color: $text-color-grey;
		}

		.payment-icon {
			font-size: 44rpx;
			margin-right: 10rpx;
		}

		.checkbox {
			font-size: 36rpx;
			margin-left: 10rpx;
		}

		.checked {
			color: $color-primary;
		}
	}

	.pay-box {
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
		height: 100rpx;
	}

	.modal-content {
		.change-address-btn {
			line-height: 2;
			padding: 0 1em;
		}

		.pay_btn {
			width: 100%;
			border-radius: 50rem !important;
			line-height: 3;
		}
	}

	.tips {
		font-size: 28rpx;
		color: $text-color-grey;
	}
	.tui-black {
		color: #222;
		line-height: 30rpx;
	}
	.tui-padding {
		box-sizing: border-box;
	}
	.tui-pr-50 {
		padding-right: 50rpx;
	}
	
	.tui-size-26 {
		font-size: 26rpx;
		line-height: 26rpx;
	}
	
	.tui-price-large {
		font-size: 34rpx;
		line-height: 32rpx;
		font-weight: 600;
	}
	
	.tui-flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}
	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}
	.tui-flex-end {
		display: flex;
		align-items: flex-end;
		padding-right: 0;
	}
	
	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}
	.tui-pr25 {
		padding-right: 25rpx;
	}
	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
